<template>
	<view class="root">
		<view v-for="(item, index) in pendingFriends" :key="index">
			<image class="avatar" :src="item.user.avatarurl" mode="aspectFill"
				@click="gotoUrl(`/pages/userhome/userhome?id=${item.user.id}`)"></image>

			<view class="msgContainer" @click="gotoUrl(`/pages/userhome/userhome?id=${item.user.id}`)">
				<text>{{ item.user.nickname }}</text>
				<text>{{ item.comment }}</text>
			</view>

			<view class="actionContainer">
				<view @click="reject(item.user.id)">
					<u-icon name="close" size="14px" label="拒绝" labelSize="14px" color="#333"
						label-color="#333"></u-icon>
				</view>
				<view @click="accept(item.user.id)">
					<u-icon name="checkmark" size="14px" label="接受" labelSize="14px" color="white"
						label-color="white"></u-icon>
				</view>
			</view>

		</view>

		<text class="blank-list-placeholder" v-if="!pendingFriends.length">- 暂无新好友请求 -</text>
	</view>
</template>

<script>
	import {
		partnerList,
		partnerUpdate,
	} from '@/config/api.js'

	import {
		gotoUrl
	} from '../../utils'

	export default {
		data() {
			return {
				gotoUrl,

				pendingFriends: [{
					"comment": "你好",
					"remark": "",
					"user": {
						"avatarurl": "../../static/chuti.jpg",
						"city": "",
						"createTime": "",
						"gender": 0,
						"hobby": "",
						"id": 0,
						"nickname": "昵称昵称昵称",
						"openid": "",
						"points": 0,
						"province": "",
						"userBirthday": "",
						"userPhone": ""
					}
				}],
				pendingFriends: [],
			}
		},
		mounted() {
			this.getPendingFriends()
		},
		methods: {
			getPendingFriends() {
				partnerList(0).then(res => {
					this.pendingFriends = res
				})
			},

			accept(id) {
				partnerUpdate(id, 1).then(() => {
					uni.showToast({
						title: '添加成功'
					})
					this.getPendingFriends()
				})
			},

			reject(id) {
				partnerUpdate(id, -1).then(() => {
					uni.showToast({
						title: '已拒绝'
					})
					this.getPendingFriends()
				})
			},
		},
	}
</script>

<style>
	.root {
		background-color: #f4f4f4;
		display: flex;
		flex-flow: column;
		box-sizing: border-box;
		min-height: 100%;
		padding: 12px;
		gap: 12px;
	}

	.root>view {
		display: flex;
		align-items: center;
		padding: 8px;
		gap: 8px;
		background-color: white;
		border-radius: 12px;
	}

	.avatar {
		width: 54px;
		height: 54px;
		border-radius: 100vw;
	}

	.msgContainer {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-flow: column;
		justify-content: center;
	}

	.msgContainer>text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.msgContainer>text:last-child {
		color: #888;
		font-size: 0.85rem;
	}

	.actionContainer {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.actionContainer>view {
		padding: 4px 6px;
		border-radius: 6px;
	}

	.actionContainer>view:first-child {
		border: 1px solid #333;
		background-color: #f4f4f4;
	}

	.actionContainer>view:last-child {
		border: 1px solid dodgerblue;
		background-color: dodgerblue;
	}
</style>